<template>
  <div class="register">
    <div class="title">注册页</div>
    <div class="block">
      <input type="text" placeholder="输入手机号" required="true">
    </div>
    <div class="block">
      <input type="password"  placeholder="输入密码" required="true">
    </div>
    <div class="block">
      <input type="password" placeholder="输入确认密码" required="true">
    </div>
     <div class="block">
      <input type="password" placeholder="输入确认邮箱" required="true">
    </div>
    <div class="block1">
      <input type="button" value="注册" class="zc" @click="handleClick()">
    </div>
  </div>
</template>

<script setup>
import {useRouter}  from 'vue-router'
var router=useRouter();

var handleClick=(path)=>{
  router.push('/login')
   alert("注册成功，请登录！")
}
</script>

<style > 
.title{
  font-size: 38px;
}
.register{
  width: 500px;
  margin-top: 80px;
  padding-top: 100px;
  text-align: center;
  margin: auto;
}
.register .title{
  font-weight: bold;
  text-align: center;
  line-height: 40px;
}
.register .block{
  margin: 20px 0;
}
.register .block input{
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding-left: 20px;
  box-sizing: border-box;
  outline: none;
  width: 100%;
}
.block1 .zc{
  width: 200px;
  border-radius: 20px;
  height: 50px;
  font-size: 28px;
  background: #ccc;
}
</style>